<ion-header>

  <ion-navbar>
    <ion-title>{{pageInfo.name}}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
    <ion-fab top right edge *ngIf="pageInfo.id=='fabs'">
        <button ion-fab mini><ion-icon name="add"></ion-icon></button>
        <ion-fab-list>
            <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
            <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
            <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
            <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
        </ion-fab-list>
    </ion-fab>
    <div *ngIf="pageInfo.id=='actionsheet'">
        <button ion-button (click)="presentActionSheet()" >操作栏</button>
    </div>
    <div *ngIf="pageInfo.id=='alert'">
        <button ion-button (click)="basic()" >Basic Alerts</button>
        <button ion-button (click)="prompt()" >Basic Alerts</button>
        <button ion-button (click)="showConfirm()" >Confirmation Alerts</button>
        <button ion-button (click)="showRadio()" >Radio Alerts</button>
        <button ion-button (click)="showCheckbox()" >Checkbox Alerts</button>
    </div>
    <div *ngIf="testRadioOpen">
        {{testRadioResult}}
    </div>
    <div *ngIf="testCheckboxOpen">
        {{testCheckboxResult}}
    </div>
    <div *ngIf="pageInfo.id=='badge'">
        <ion-list>
            <ion-item>
                <ion-icon name="logo-twitter" item-start></ion-icon>
                人数
                <ion-badge item-end>260k</ion-badge>
            </ion-item>
            <ion-item>

                <ion-badge item-start>260k</ion-badge>
                人数
                <ion-icon name="logo-twitter" item-end></ion-icon>

            </ion-item>
        </ion-list>
    </div>
    <div *ngIf="pageInfo.id=='button'">
        <!--Buttons In Components-->
        <ion-header>
            <ion-navbar>
                <ion-buttons start>
                    <button ion-button icon-only>
                        <ion-icon name="contact"></ion-icon>
                    </button>
                </ion-buttons>

                <ion-buttons end>
                    <button ion-button icon-only>
                        <ion-icon name="search"></ion-icon>
                    </button>
                </ion-buttons>
            </ion-navbar>
        </ion-header>
        <div style="margin-top: 40px">
            <p>Default Style</p>
            <button ion-button color="light">Light</button>
            <button ion-button>Default</button>
            <button ion-button color="secondary">Secondary</button>
            <button ion-button color="danger">Danger</button>
            <button ion-button color="dark">Dark</button>
        </div>
        <div>
            <p>Outline Style</p>
            <button ion-button color="light" outline>Light Outline</button>
            <button ion-button outline>Primary Outline</button>
            <button ion-button color="secondary" outline>Secondary Outline</button>
            <button ion-button color="danger" outline>Danger Outline</button>
            <button ion-button color="dark" outline>Dark Outline</button>
        </div>
        <div>
            <p>Clear Style</p>
            <button ion-button color="light" clear>Light Clear</button>
            <button ion-button clear>Primary Clear</button>
            <button ion-button color="secondary" clear>Secondary Clear</button>
            <button ion-button color="danger" clear>Danger Clear</button>
            <button ion-button color="dark" clear>Dark Clear</button>
        </div>
        <div>
            <p>Round Buttons</p>
            <button ion-button color="light" round>Light Round</button>
            <button ion-button round>Primary Round</button>
            <button ion-button color="secondary" round>Secondary Round</button>
            <button ion-button color="danger" round>Danger Round</button>
            <button ion-button color="dark" round>Dark Round</button>
        </div>
        <div>
            <p>Full Buttons</p>
            <button ion-button block>Block Button</button>
            <button ion-button full>Full Button</button>
            <button ion-button small>Small</button>
            <button ion-button>Default</button>
            <button ion-button large>Large</button>
        </div>
        <div>
            <p>Icon Buttons</p>
            <button ion-button icon-left>
                <ion-icon name="home"></ion-icon>
                Left Icon
            </button>

            <!-- Float the icon right -->
            <button ion-button icon-right>
                Right Icon
                <ion-icon name="home"></ion-icon>
            </button>

            <!-- Only icon (no text) -->
            <button ion-button icon-only>
                <ion-icon name="home"></ion-icon>
            </button>
        </div>

        <!-- Buttons In Components -->
        <ion-list>
            <ion-item>
                Left Icon Button
                <button ion-button outline item-end icon-left>
                    <ion-icon name="star"></ion-icon>
                    Left Icon
                </button>
            </ion-item>
        </ion-list>
    </div>
    <div *ngIf="pageInfo.id=='card'">
        <div>
            <ion-card>
                <ion-card-header>
                    card 标题
                </ion-card-header>
                <ion-card-content>
                    card 内容
                </ion-card-content>
            </ion-card>
        </div>
        <div>
            <ion-card>
                <ion-card-header>
                    Card Lists
                </ion-card-header>
                <ion-list>
                    <button ion-item>
                        <ion-icon name="cart" item-start></ion-icon>
                        Shopping
                    </button>

                    <button ion-item>
                        <ion-icon name="medical" item-start></ion-icon>
                        Hospital
                    </button>

                    <button ion-item>
                        <ion-icon name="cafe" item-start></ion-icon>
                        Cafe
                    </button>

                    <button ion-item>
                        <ion-icon name="paw" item-start></ion-icon>
                        Dog Park
                    </button>

                    <button ion-item>
                        <ion-icon name="beer" item-start></ion-icon>
                        Pub
                    </button>

                    <button ion-item>
                        <ion-icon name="planet" item-start></ion-icon>
                        Space
                    </button>

                </ion-list>
            </ion-card>
        </div>
        <div>
            <p>Card Images</p>
            <ion-card>
                <img src="assets/imgs/slide01.png">
                <ion-card-content>
                    <ion-card-title>
                        标题
                    </ion-card-title>
                    <p>内容</p>
                </ion-card-content>
            </ion-card>
        </div>
        <div class="card-background-page">
            <ion-card>
                <img src="assets/imgs/slide03.jpg"/>
                <div class="card-title">Background Images</div>
                <div class="card-subtitle">内容</div>
            </ion-card>
        </div>
        <div>
            <p>Advanced Cards Social Cards</p>
            <ion-card>

                <ion-item>
                    <ion-avatar item-start>
                        <img src="assets/imgs/slide02.png">
                    </ion-avatar>
                    <h2>姓名</h2>
                    <p>出生日期</p>
                </ion-item>

                <img src="assets/imgs/slide03.jpg">

                <ion-card-content>
                    <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
                </ion-card-content>

                <ion-row>
                    <ion-col>
                        <button ion-button icon-left clear small>
                            <ion-icon name="thumbs-up"></ion-icon>
                            <div>12 Likes</div>
                        </button>
                    </ion-col>
                    <ion-col>
                        <button ion-button icon-left clear small>
                            <ion-icon name="text"></ion-icon>
                            <div>4 Comments</div>
                        </button>
                    </ion-col>
                    <ion-col center text-center>
                        <ion-note>
                            11h ago
                        </ion-note>
                    </ion-col>
                </ion-row>

            </ion-card>
        </div>
        <div>
            <p>Advanced Cards Map Cards</p>
            <ion-card>

                <img src="assets/imgs/slide03.jpg">
                <ion-fab right top>
                    <button ion-fab>
                        <ion-icon name="pin"></ion-icon>
                    </button>
                </ion-fab>

                <ion-item>
                    <ion-icon name="football" item-start large></ion-icon>
                    <h2>足球</h2>
                    <p>地址</p>
                </ion-item>

                <ion-item>
                    <ion-icon name="wine" item-left large ></ion-icon>
                    <h2>厨房</h2>
                    <p>地址</p>
                </ion-item>

                <ion-item>
                    <span item-left>18 min</span>
                    <span item-left>(2.6 mi)</span>
                    <button ion-button icon-left clear item-end>
                        <ion-icon name="navigate"></ion-icon>
                        开始导航
                    </button>
                </ion-item>

            </ion-card>
        </div>
    </div>
    <div *ngIf="pageInfo.id=='checkbox'">
        <ion-item>
            <ion-label>黑色</ion-label>
            <ion-checkbox color="dark" checked="true"></ion-checkbox>
        </ion-item>
        <ion-item>
            <ion-label>红色</ion-label>
            <ion-checkbox color="red" checked="true"></ion-checkbox>
        </ion-item>

        <ion-item>
            <ion-label>Arya Stark</ion-label>
            <ion-checkbox disabled="true"></ion-checkbox>
        </ion-item>
    </div>
    <div *ngIf="pageInfo.id=='datetime'">
        <ion-item>
            <ion-label>年</ion-label>
            <ion-datetime displayFormat="YYYY" pickerFormat="YYYY" [(ngModel)]="timeStarts"></ion-datetime>
        </ion-item>
        <ion-item>
            <ion-label>月</ion-label>
            <ion-datetime displayFormat="MM" pickerFormat="MM" [(ngModel)]="timeStarts"></ion-datetime>
        </ion-item>
        <ion-item>
            <ion-label>日</ion-label>
            <ion-datetime displayFormat="DD" pickerFormat="DD" [(ngModel)]="timeStarts"></ion-datetime>
        </ion-item>
        <ion-item>
            <ion-label>年月</ion-label>
            <ion-datetime displayFormat="YYYY/MM" pickerFormat="YYYY/MM" [(ngModel)]="timeStarts"></ion-datetime>
        </ion-item>
        <ion-item>
            <ion-label>年月日</ion-label>
            <ion-datetime displayFormat="YYYY/MM/DD" pickerFormat="YYYY/MM/DD" [(ngModel)]="timeStarts"></ion-datetime>
        </ion-item>

        <ion-item>
            <ion-label>日期时间</ion-label>
            <ion-datetime displayFormat="YYYY-MM-DD HH:mm" pickerFormat="YYYY-MM-DD HH:mm" [(ngModel)]="timeStarts"></ion-datetime>
        </ion-item>
        <ion-item>
            <ion-label>日期时间</ion-label>
            <ion-datetime displayFormat="YYYY年MM月DD日 HH:mm" pickerFormat="YYYYMMDD HH:mm" [(ngModel)]="timeStarts"></ion-datetime>
        </ion-item>
        <ion-item>
            <ion-label>时间</ion-label>
            <ion-datetime displayFormat="HH:mm" pickerFormat="HH:mm" [(ngModel)]="timeStarts"></ion-datetime>
        </ion-item>
        <ion-item>
            <ion-label>时间</ion-label>
            <ion-datetime displayFormat="h:mm A" pickerFormat="h mm A" [(ngModel)]="timeStarts"></ion-datetime>
        </ion-item>
    </div>
    <div *ngIf="pageInfo.id=='fabs'">
        <ion-fab right bottom>
            <button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
            <ion-fab-list side="left">
                <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
                <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
                <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
                <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
            </ion-fab-list>
        </ion-fab>
        <ion-fab left bottom>
            <button ion-fab mini color="light"><ion-icon name="arrow-dropright"></ion-icon></button>
            <ion-fab-list side="right">
                <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
                <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
                <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
                <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
            </ion-fab-list>
        </ion-fab>
    </div>
    <div *ngIf="pageInfo.id=='grid'" class="grid-page">
        <p>等分</p>
        <ion-grid>
            <ion-row>
                <ion-col>
                    1 of 2
                </ion-col>
                <ion-col>
                    2 of 2
                </ion-col>
            </ion-row>
        </ion-grid>
        <ion-grid>
            <ion-row>
                <ion-col>
                    1 of 3
                </ion-col>
                <ion-col>
                    2 of 3
                </ion-col>
                <ion-col>
                    3 of 3
                </ion-col>
            </ion-row>
        </ion-grid>
        <p>（2 of 3） col-8</p>
        <p>（2 of 3） col-6</p>
        <ion-grid>
            <ion-row>
                <ion-col>
                    1 of 3
                </ion-col>
                <ion-col col-8>
                    2 of 3 (wider)
                </ion-col>
                <ion-col>
                    3 of 3
                </ion-col>
            </ion-row>
        </ion-grid>
        <ion-grid>
            <ion-row>
                <ion-col>
                    1 of 3
                </ion-col>
                <ion-col col-6>
                    2 of 3 (wider)
                </ion-col>
                <ion-col>
                    3 of 3
                </ion-col>
            </ion-row>
        </ion-grid>
        <p>宽度自适应</p>
        <ion-grid>
            <ion-row>
                <ion-col>
                    1 of 3
                </ion-col>
                <ion-col col-auto>
                    宽度自适应
                </ion-col>
                <ion-col>
                    3 of 3
                </ion-col>
            </ion-row>
        </ion-grid>
        <ion-grid>
            <ion-row>
                <ion-col>
                    1 of 4
                </ion-col>
                <ion-col>
                    2 of 4
                </ion-col>
                <ion-col col-auto>
                    <ion-input placeholder="Variable width input"></ion-input>
                </ion-col>
                <ion-col>
                    4 of 4
                </ion-col>
            </ion-row>
        </ion-grid>
        <p>定宽 col-4 col-2 col-2 col-3</p>
        <ion-grid>
            <ion-row>
                <ion-col col-4>
                    1 of 4
                </ion-col>
                <ion-col col-2>
                    2 of 4
                </ion-col>
                <ion-col col-2>
                    3 of 4
                </ion-col>
                <ion-col col-3>
                    4 of 4
                </ion-col>
            </ion-row>
        </ion-grid>
        <p>col-sm</p>
        <ion-grid>
            <ion-row>
                <ion-col col-12 col-sm>
                    1 of 4
                </ion-col>
                <ion-col col-12 col-sm>
                    2 of 4
                </ion-col>
                <ion-col col-12 col-sm>
                    3 of 4
                </ion-col>
                <ion-col col-12 col-sm>
                    4 of 4
                </ion-col>
            </ion-row>
        </ion-grid>
        <p>边距 offset-1</p>
        <ion-grid>
            <ion-row>
                <ion-col col-3>
                    1 of 2
                </ion-col>
                <ion-col col-3 offset-1>
                    2 of 2
                </ion-col>
            </ion-row>
        </ion-grid>
        <ion-grid>
            <ion-row>
                <ion-col col-md-3>
                    1 of 3
                </ion-col>
                <ion-col col-md-3>
                    2 of 3
                </ion-col>
                <ion-col col-md-3 offset-md-3>
                    3 of 3
                </ion-col>
            </ion-row>
        </ion-grid>
        <ion-grid>
            <ion-row>
                <ion-col col-9 push-3>
                    1 of 2
                </ion-col>
                <ion-col col-3 pull-9>
                    2 of 2
                </ion-col>
            </ion-row>
        </ion-grid>
        <p>边距 offset-1</p>
        <ion-grid>
            <ion-row>
                <ion-col col-md-6 push-md-3>
                    1 of 3
                </ion-col>
                <ion-col col-md-3 push-md-3>
                    2 of 3
                </ion-col>
                <ion-col col-md-3 pull-md-9>
                    3 of 3
                </ion-col>
            </ion-row>
        </ion-grid>
        <p>位置 align-self-start</p>
        <p>位置 align-self-center</p>
        <p>位置 align-self-end</p>
        <ion-grid>
            <ion-row align-items-start>
                <ion-col>
                    1 of 4
                </ion-col>
                <ion-col>
                    2 of 4
                </ion-col>
                <ion-col>
                    3 of 4
                </ion-col>
                <ion-col>
                    4 of 4 <br>#<br>#<br>#
                </ion-col>
            </ion-row>
        </ion-grid>
        <ion-grid>
            <ion-row align-items-center>
                <ion-col>
                    1 of 4
                </ion-col>
                <ion-col>
                    2 of 4
                </ion-col>
                <ion-col>
                    3 of 4
                </ion-col>
                <ion-col>
                    4 of 4 <br>#<br>#<br>#
                </ion-col>
            </ion-row>
        </ion-grid>
        <ion-grid>
            <ion-row align-items-end>
                <ion-col>
                    1 of 4
                </ion-col>
                <ion-col>
                    2 of 4
                </ion-col>
                <ion-col>
                    3 of 4
                </ion-col>
                <ion-col>
                    4 of 4 <br>#<br>#<br>#
                </ion-col>
            </ion-row>
        </ion-grid>
        <p>位置 align-self-start</p>
        <p>位置 align-self-center</p>
        <p>位置 align-self-end</p>
        <ion-grid>
            <ion-row>
                <ion-col align-self-start>
                    <div>
                        1 of 4
                    </div>
                </ion-col>
                <ion-col align-self-center>
                    <div>
                        2 of 4
                    </div>
                </ion-col>
                <ion-col align-self-end>
                    <div>
                        3 of 4
                    </div>
                </ion-col>
                <ion-col>
                    <div>
                        4 of 4 <br>#<br>#<br>#<br>#
                    </div>
                </ion-col>
            </ion-row>
        </ion-grid>
        <p>边距 justify-content-start</p>
        <p>边距 justify-content-center</p>
        <p>边距 justify-content-end</p>
        <p>边距 justify-content-around</p>
        <p>边距 justify-content-between</p>
        <ion-grid>
            <ion-row justify-content-start>
                <ion-col col-3>
                    1 of 2
                </ion-col>
                <ion-col col-3>
                    2 of 2
                </ion-col>
            </ion-row>
        </ion-grid>
        <ion-grid>
            <ion-row justify-content-center>
                <ion-col col-3>
                    1 of 2
                </ion-col>
                <ion-col col-3>
                    2 of 2
                </ion-col>
            </ion-row>
        </ion-grid>
        <ion-grid>
            <ion-row justify-content-end>
                <ion-col col-3>
                    1 of 2
                </ion-col>
                <ion-col col-3>
                    2 of 2
                </ion-col>
            </ion-row>
        </ion-grid>
        <ion-grid>
            <ion-row justify-content-around>
                <ion-col col-3>
                    1 of 2
                </ion-col>
                <ion-col col-3>
                    2 of 2
                </ion-col>
            </ion-row>
        </ion-grid>
        <ion-grid>
            <ion-row justify-content-between>
                <ion-col col-3>
                    1 of 2
                </ion-col>
                <ion-col col-3>
                    2 of 2
                </ion-col>
            </ion-row>
        </ion-grid>
    </div>
    <div *ngIf="pageInfo.id=='icon'">
        <ion-icon name="heart"></ion-icon>                    <!-- active -->
        <br>
        <p>isActive ios生效 android不生效</p>
        <ion-icon name="heart" isActive="false"></ion-icon>  <!-- inactive -->
        <br>
        <ion-icon ios="logo-apple" md="logo-android" isActive="false"></ion-icon>
        <br>
        <ion-icon [name]="myIcon" isActive="false"></ion-icon>
        <br>
        <ion-icon name="ios-clock"></ion-icon>
        <br>
        <ion-icon name="logo-twitter"></ion-icon>
    </div>
    <div *ngIf="pageInfo.id=='input'">
        <p>Fixed Inline Labels</p>
        <ion-list>
            <ion-item>
                <ion-label fixed>姓名</ion-label>
                <ion-input type="text" value=""></ion-input>
            </ion-item>
            <ion-item>
                <ion-label fixed>密码</ion-label>
                <ion-input type="password"></ion-input>
            </ion-item>
        </ion-list>
        <p>Floating Labels</p>
        <ion-list>
            <ion-item>
                <ion-label floating>姓名</ion-label>
                <ion-input type="text"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label floating>密码</ion-label>
                <ion-input type="password"></ion-input>
            </ion-item>
        </ion-list>
        <p>Inline Labels</p>
        <ion-list>
            <ion-item>
                <ion-label>姓名</ion-label>
                <ion-input type="text"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label>密码</ion-label>
                <ion-input type="password"></ion-input>
            </ion-item>
        </ion-list>

        <div padding>
            <button block>Sign In</button>
        </div>
        <p>Inset Labels</p>
        <ion-list inset>
            <ion-item>
                <ion-label>姓名</ion-label>
                <ion-input type="text"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label>密码</ion-label>
                <ion-input type="password"></ion-input>
            </ion-item>
        </ion-list>
        <p>Placeholder Labels</p>
        <ion-list>
            <ion-item>
                <ion-input type="text" placeholder="请输入姓名"></ion-input>
            </ion-item>
            <ion-item>
                <ion-input type="password" placeholder="请输入密码"></ion-input>
            </ion-item>
        </ion-list>
        <p>Stacked Labels</p>
        <ion-list>
            <ion-item>
                <ion-label stacked>姓名</ion-label>
                <ion-input type="text"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label stacked>密码</ion-label>
                <ion-input type="password"></ion-input>
            </ion-item>
        </ion-list>
    </div>
    <div *ngIf="pageInfo.id=='list'"></div>
    <div *ngIf="pageInfo.id=='loading'">
        <button ion-button (click)="presentLoading()">提示框</button>
        <button ion-button (click)="presentLoadingDefault('ios')">ios</button>
        <button ion-button (click)="presentLoadingDefault('dots')">dots</button>
        <button ion-button (click)="presentLoadingDefault('bubbles')">bubbles</button>
        <button ion-button (click)="presentLoadingDefault('circles')">circles</button>

        <button ion-button (click)="presentLoadingCustom()">自定义</button>
        <button ion-button (click)="presentLoadingText()">只显示文本</button>

    </div>
    <div *ngIf="pageInfo.id=='slider'">
        <ion-slides class="focus" loop="true" autoplay="3000">
            <ion-slide>
                <img src="assets/imgs/slide01.png">
            </ion-slide>
            <ion-slide>
                <img src="assets/imgs/slide02.png">
            </ion-slide>
            <ion-slide>
                <img src="assets/imgs/slide03.jpg">
            </ion-slide>
        </ion-slides>
    </div>

</ion-content>
